<template>
  <div class="politics-practice">
    <UnifiedPractice
      module="politics"
      fetchQuestionsApi="/api/politics/practice"
      submitAnswersApi="/api/politics/submit"
      @practice-completed="onPracticeCompleted"
      :showAnswerCard="true"
      :showTimer="true"
      :trackWrongQuestions="true"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import UnifiedPractice from '@/components/UnifiedPractice.vue';

const onPracticeCompleted = (result: any) => {
  console.log('时政练习完成:', result);
  // 保存错题记录
  if (result.wrongQuestions && result.wrongQuestions.length > 0) {
    const wrongQuestionsRecord = JSON.parse(localStorage.getItem('politicsWrongQuestions') || '[]');
    const newWrongQuestions = result.wrongQuestions.filter((q: any) => 
      !wrongQuestionsRecord.some((wq: any) => wq.questionId === q.questionId)
    );
    
    if (newWrongQuestions.length > 0) {
      localStorage.setItem('politicsWrongQuestions', 
        JSON.stringify([...wrongQuestionsRecord, ...newWrongQuestions])
      );
      ElMessage.info(`已添加 ${newWrongQuestions.length} 道错题到错题本`);
    }
  }
};
</script>

<style scoped>
.politics-practice {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f7fa;
  padding: 20px 0;
}
</style>